<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>导航条练习</title>
		<link rel="stylesheet" href="./css/reset.css">
		<style>
            /*
            子元素设置浮动后,父元素也要设置浮动,负责父元素会高度塌陷
             */
            .dao-hang {
                float: left;
                background-color: #e6e5e1;
            }

            .demo1 {
                float: left;
                margin: 10px 30px;
                font-size: 20px;
                color: #8c8c88;
            }

            .demo1:hover {
	            background-color: #3f3f3f;
	            color: #91918f;
            }

		</style>
	</head>
	<body>

		<div class="dao-hang">
			<div class="demo1">HTML/CSS</div>
			<div class="demo1">Brows Side</div>
			<div class="demo1">Service Side</div>
			<div class="demo1">Programing</div>
			<div class="demo1">XML</div>
			<div class="demo1">Web Building</div>
			<div class="demo1">Reference</div>
		</div>
	</body>
</html>
